#search {
  margin: 0 auto;
  padding: 24px;
  width: 100%;
  max-width: 1200px;

  .search {
    margin: 0 auto;
    width: 50%;
    border-radius: 22px;

    .ant-input {
      border-radius: 22px 0 0 22px;
    }

    .ant-btn {
      border-radius: 0 22px 22px 0;
    }
  }

  .wrapper {
    .list-item {
      a {
        color: inherit;

        &:hover {
          color: @primary-color;
        }
      }
    }

    .tag {
      margin: 6px;
      padding: 0 12px;
      height: 30px;
      line-height: 30px;
      border: none;
      border-radius: 8px;
      color: #738192;
      background-color: #ffffff;
      box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15);
      transition: 0.25s;

      &:hover {
        color: @primary-color;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
      }
    }
  }
}

body.dark {
  #search {
    .search {
      .ant-input {
        color: @dark-text-color;
        background-color: @dark-bg-color;
        border-color: @dark-text-color-10;
      }

      .ant-input-suffix {
        i {
          color: @dark-text-color-9;
        }
      }

      .ant-input-group-addon {
        background-color: @dark-bg-color;
      }
    }

    .wrapper {
      .ant-tabs-bar {
        color: @dark-text-color;
        border-bottom-color: @dark-text-color-9;
      }

      .list-item {
        border-bottom-color: @dark-text-color-10;

        a {
          color: @dark-text-color-7;
        }
      }

      .tag {
        background-color: @dark-text-color-10;
        color: @dark-text-color-7;
      }
    }
  }
}

@media only screen and (max-width: 767px) {
  #search {
    .search {
      width: 80%;
    }
  }
}

@media screen and (max-width: 480px) {
  #search {
    .search {
      width: 100%;
    }
  }
}
